<template>
  <div id="findpasswordContainer">
    <div class="findpassword-title">
      <span class="title">找回密码</span>
    </div>
    <div class="findpassword-box">
      <el-form :model="userMsg" status-icon label-width="0px">
        <el-form-item prop="email">
          <el-input type="email" v-model="userMsg.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-input type="text" v-model="userMsg.captcha" autocomplete="off" placeholder="验证码">
            <sendEmailCaptcha slot="append" :email="userMsg.email" reUtype="findUserPassword" @setCpatchaMD5="setMd5"></sendEmailCaptcha>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="userMsg.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="reppassword">
          <el-input type="password" v-model="userMsg.reppassword" placeholder="重复密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%;" @click="submitEdit">找回密码</el-button>
        </el-form-item>
        <el-form-item>
          <el-link :underline="false" @click="toLogin" style="float:right">去登录</el-link>
        </el-form-item>
      </el-form> 
    </div>
  </div>
</template>

<script>
import sendEmailCaptcha from "@/components/public/sendEmailCaptcha"
import {resetUserPassword} from "@/api/front/user"
import { mapMutations,mapGetters} from 'vuex'
export default {
  data() {
    return {
      userMsg:{
        email:"",
        captcha:"",
        captchaCode:"",
        password:"",
        reppassword:""
      }
    }
  },
  components:{
    sendEmailCaptcha
  },
  methods: {
    ...mapMutations({
      setUserMsg: 'user/setUserMsg'
    }),
    setMd5(md5) {
      this.userMsg.captchaCode = md5
    },
    toLogin(){
      this.$router.push({
        path:'/user/login'
      })
    },
    submitEdit(){
      if(this.userMsg.password && this.userMsg.reppassword){
        resetUserPassword(this.userMsg, (res) => {
          if(res.code == 200){
            this.setUserMsg(res.data)
            this.$router.push({
              path:'/uIndex/main'
            })
          }
        }, true)
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>